@extends('layouts.frontend-iframe-base')


@section('css')
    <style>
        .table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{vertical-align: middle;}
    </style>
@stop

@section('content')
        <!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        我的设备
        <small>设备详情</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">首页</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">

    <!-- Your Page Content Here -->

    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">发电数据</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12">
                            <dl>
                                <dt>设备名称</dt>

                                <dd>@if($device){{$device->name}}@endif</dd>
                                <dt>设备S/N</dt>
                                <dd>@if($device){{$device->sn}}@endif</dd>
                                <dt>设备ID（硬件）</dt>
                                <dd>@if($device){{$device->device_id}}@endif</dd>
                            </dl>
                            <hr>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-9">
                            <p class="text-center">
                                <strong>设备发电数据监测</strong>
                            </p>
                            <div id="echarts" style="width: 100%;height:300px;"></div>
                        </div>
                        <!-- /.col -->
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>请选择类型</label>

                                <div>
                                    <div class="btn-group J-type">
                                        <button type="button" class="btn btn-default active" data-type="energy">
                                            电量
                                        </button>
                                        <button type="button" class="btn btn-default" data-type="power">功率
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group J-time-type">
                                <label>请选择时间单位</label>

                                <div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" data-time-type="m">按月
                                        </button>
                                        <button type="button" class="btn btn-default active" data-time-type="d">
                                            按日
                                        </button>
                                        <button style="display: none;" type="button" class="btn btn-default" data-time-type="h">按小时
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>请选择日期范围</label>

                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" class="form-control pull-right active" id="reservation" value="{{$begin_date}} - {{$end_date}}">
                                </div>
                                <!-- /.input group -->
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                </div>
                <!-- ./box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">设备实时参数数据</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="J-dt" class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>当前状态</th>
                            <th>产品型号</th>
                            <th>逆变器温度</th>
                            <th>电网频率</th>
                            <th>直流</th>
                            <th>交流</th>
                            <th>今日电量</th>
                            <th>昨日电量</th>
                            <th>当月电量</th>
                            <th>总电量</th>
                            <th>采集时间</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>

                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <!-- LINE CHART -->
                            <div id="J-input-i" class="box box-info">
                                <div class="box-header with-border">
                                    <h3 class="box-title">输入电流</h3>
                                </div>
                                <div class="box-body chart-responsive">
                                    <div class="row" style="margin-left: 0px; margin-right: 0px;">
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <div class="input-group-addon">
                                                    <i class="fa fa-calendar"></i>
                                                </div>
                                                <input type="text" class="form-control J-date-picker" data-mask="">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <select class="form-control select2 select2-hidden-accessible J-time-picker" style="width: 100%">
                                                <option value="all" selected="selected">总时段</option>
                                                <option value="06,10">6:00~10:00</option>
                                                <option value="10,14">10:00~14:00</option>
                                                <option value="14,18">14:00~18:00</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="ii-chart" style="width: 100%; height: 300px;"></div>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->

                        </div>
                        <div class="col-md-6">
                            <!-- LINE CHART -->
                            <div id="J-input-v" class="box box-info">
                                <div class="box-header with-border">
                                    <h3 class="box-title">输入电压</h3>
                                </div>
                                <div class="box-body chart-responsive">
                                    <div class="row" style="margin-left: 0px; margin-right: 0px;">
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <div class="input-group-addon">
                                                    <i class="fa fa-calendar"></i>
                                                </div>
                                                <input type="text" class="form-control J-date-picker" data-mask="">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <select class="form-control select2 select2-hidden-accessible J-time-picker" style="width: 100%">
                                                <option value="all" selected="selected">总时段</option>
                                                <option value="06,10">6:00~10:00</option>
                                                <option value="10,14">10:00~14:00</option>
                                                <option value="14,18">14:00~18:00</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="iv-chart" style="width: 100%; height: 300px;"></div>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->

                        </div>
                        <div class="col-md-6">
                            <!-- LINE CHART -->
                            <div id="J-output-i" class="box box-info">
                                <div class="box-header with-border">
                                    <h3 class="box-title">输出电流</h3>
                                </div>
                                <div class="box-body chart-responsive">
                                    <div class="row" style="margin-left: 0px; margin-right: 0px;">
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <div class="input-group-addon">
                                                    <i class="fa fa-calendar"></i>
                                                </div>
                                                <input type="text" class="form-control J-date-picker" data-mask="">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <select class="form-control select2 select2-hidden-accessible J-time-picker" style="width: 100%">
                                                <option value="all" selected="selected">总时段</option>
                                                <option value="06,10">6:00~10:00</option>
                                                <option value="10,14">10:00~14:00</option>
                                                <option value="14,18">14:00~18:00</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="oi-chart" style="width: 100%; height: 300px;"></div>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->

                        </div>
                        <div class="col-md-6">
                            <!-- LINE CHART -->
                            <div class="box box-info" id="J-output-v">
                                <div class="box-header with-border">
                                    <h3 class="box-title">输出电压</h3>
                                </div>
                                <div class="box-body chart-responsive">
                                    <div class="row" style="margin-left: 0px; margin-right: 0px;">
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <div class="input-group-addon">
                                                    <i class="fa fa-calendar"></i>
                                                </div>
                                                <input type="text" class="form-control J-date-picker" data-mask="">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <select class="form-control select2 select2-hidden-accessible J-time-picker" style="width: 100%">
                                                <option value="all" selected="selected">总时段</option>
                                                <option value="06,10">6:00~10:00</option>
                                                <option value="10,14">10:00~14:00</option>
                                                <option value="14,18">14:00~18:00</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="ov-chart" style="width: 100%; height: 300px;"></div>

                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->

                        </div>

                        <div class="col-md-12">
                            <!-- LINE CHART -->
                            <div class="box box-info" id="J-dgc">
                                <div class="box-header with-border">
                                    <h3 class="box-title">当日电量</h3>
                                </div>
                                <div class="box-body chart-responsive">
                                    <div class="row" style="margin-left: 0px; margin-right: 0px;">
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <div class="input-group-addon">
                                                    <i class="fa fa-calendar"></i>
                                                </div>
                                                <input type="text" class="form-control J-date-picker" data-mask="">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <select class="form-control select2 select2-hidden-accessible J-time-picker" style="width: 100%">
                                                <option value="all" selected="selected">总时段</option>
                                                <option value="06,10">6:00~10:00</option>
                                                <option value="10,14">10:00~14:00</option>
                                                <option value="14,18">14:00~18:00</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="dgc-chart" style="width: 100%; height: 300px;"></div>

                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->

                        </div>
                    </div>

                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>

    </div>



</section>
<!-- /.content -->


@stop

@section('js')
    <script>

        $('#J-dt').DataTable({
            "paging": false,
            "lengthChange": false,
            "searching": false,
            "ordering": false,
            "info": false,
            "autoWidth": false,
            "ajax": {
                "url": "/frontend/device/last-inverter-data?device_id={{$device->id}}",
                "type": "get"
            },
            "columns": [
                {"data": "status_label"},
                {"data": "IVMode"},
                {"data": "IVTemp"},
                {"data": "FR"},
                {"data": "id"},
                {"data": "id"},
                {"data": "DayGenCap"},
                {"data": "LastDayGenCap"},
                {"data": "MonthGenCap"},
                {"data": "TotGenCap"},
                {"data": "EventTime"}
            ],
            "columnDefs": [
                {
                    "targets": 4,
                    "render": function (data, type, row) {
                        var html='<p>电压1：'+row.DCU1+'</p>';
                        html=html+'<p>电流1：'+row.DCI1+'</p>';
                        html=html+'<p>电压2：'+row.DCU2+'</p>';
                        html=html+'<p>电流2：'+row.DCI2+'</p>';
                        html=html+'<p>电压3：'+row.DCU3+'</p>';
                        html=html+'<p>电流3：'+row.DCI3+'</p>';
                        html=html+'<p>电压4：'+row.DCU4+'</p>';
                        html=html+'<p>电流4：'+row.DCI4+'</p>';
                        return html;
                    }
                },
                {
                    "targets": 5,
                    "render": function (data, type, row) {
                        var html='<p>A相电压：'+row.ACUA+'</p>';
                        html=html+'<p>A相电流：'+row.ACIA+'</p>';
                        html=html+'<p>B相电压：'+row.ACUB+'</p>';
                        html=html+'<p>B相电流：'+row.ACIB+'</p>';
                        html=html+'<p>C相电压：'+row.ACUC+'</p>';
                        html=html+'<p>C相电流：'+row.ACIC+'</p>';
                        return html;
                    }
                }


            ]

        });

        /*
         * **************
         * 通过socket客户端监听项目的实时数据
         * *****************
         */
        {{--$(function(){--}}
            {{--toastr.options = {--}}
                {{--"positionClass": "toast-bottom-right",--}}
                {{--"onclick":function(){--}}
                    {{--window.open('/frontend/warn/last-temp');--}}
                {{--}--}}
            {{--};--}}

            {{--var client = window.parent.Client;--}}
            {{--client.openProject({{$device->site_id}});--}}
            {{--client.realTimeDataCb = function (data) {--}}
                {{--$('#J-dt').DataTable().ajax.reload();--}}
                {{--toastr.info('已自动更新最新检测数据', '实时提醒');--}}
            {{--};--}}

        {{--});--}}


    </script>
    <script>
        $(function () {
            $('#reservation').daterangepicker({
                format: 'YYYY-MM-DD'
            });

            $('#reservation').on('change', function () {
                loadData();
            });

            $('.J-type button').click(function () {
                $(this).parent().find('button').removeClass('active');
                $(this).addClass('active');
                if ($(this).data('type') == 'energy') {
                    $('.J-time-type').show();

                }
                if ($(this).data('type') == 'power') {
                    $('.J-time-type').hide();
                }
                loadData();
            });
            $('.J-time-type button').click(function () {
                $(this).parent().find('button').removeClass('active');
                $(this).addClass('active');
                loadData();
            });
            function loadData() {
                var params = getDataParams();
                $.post('/frontend/device/energy-data', params, function (res) {
                    if (res.status != 1) {
                        alert(res.error_msg);
                        return;
                    }
                    myChart.hideLoading();
                    myChart.setOption({
                        title: {
                            text: ' '
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                animation: false
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: res.data.labels
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%'],
                            splitLine: {
                                show: false
                            }
                        },
                        series: [{
                            name: '发电量',
                            type: 'line',
                            showSymbol: false,
                            hoverAnimation: false,
                            data: res.data.data
                        }]
                    });
                }, 'json');
            }

            function getDataParams() {
                var start = $('#reservation').data('daterangepicker').startDate.format('YYYY-MM-DD');
                var end = $('#reservation').data('daterangepicker').endDate.format('YYYY-MM-DD');
                var params = {
                    device_id: '{{$device->id}}',
                    start: start,
                    end: end,
                    type: $('.J-type').find('.active').data('type'),
                    time_type: $('.J-time-type').find('.active').data('time-type')
                };
                return params;
            }

            var myChart = echarts.init(document.getElementById('echarts'));
            myChart.showLoading();

            loadData();

        });


        $(function () {

            var ii_chart = echarts.init(document.getElementById('ii-chart'));
            var iv_chart = echarts.init(document.getElementById('iv-chart'));
            var oi_chart = echarts.init(document.getElementById('oi-chart'));
            var ov_chart = echarts.init(document.getElementById('ov-chart'));
            var dgc_chart = echarts.init(document.getElementById('dgc-chart'));

            var option = {
                title: {
                    text: ' '
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    data: []
                }]

            };

            $('.J-date-picker').datepicker({
                format: 'yyyy-mm-dd',
                endDate: '{{$today_date}}',
                autoclose: true
            }).datepicker('setDate', new Date(Date.parse('{{$today_date}}'.replace(/-/g, '/'))));
            $('.J-time-picker').select2();

            function create_input_i_chart() {
                var input_i = $('#J-input-i');
                var params = {};
                params.device_id = '{{$device->id}}';
                params.date = input_i.find('.J-date-picker').val();
                params.time = input_i.find('.J-time-picker').val();
                ii_chart.showLoading();
                $.get('/frontend/device/some-data', params, function (res) {
                    if (res.status != 1) {
                        alert(res.error_msg);
                        return;
                    }
                    var opt = $.extend(true, {}, option, {
                        xAxis: {
                            data: res.data.labels
                        },
                        series: [
                            {
                                name: '直流电流1',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.DCI1
                            },
                            {
                                name: '直流电流2',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.DCI2
                            },
                            {
                                name: '直流电流3',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.DCI3
                            },
                            {
                                name: '直流电流4',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.DCI4
                            }
                        ]
                    });
                    ii_chart.setOption(opt);
                    ii_chart.hideLoading();

                }, 'json');
            }

            function create_input_v_chart() {
                var input_i = $('#J-input-v');
                var params = {};
                params.device_id = '{{$device->id}}';
                params.date = input_i.find('.J-date-picker').val();
                params.time = input_i.find('.J-time-picker').val();
                iv_chart.showLoading();
                $.get('/frontend/device/some-data', params, function (res) {
                    if (res.status == 0) {
                        alert('获取数据失败！');
                        return;
                    }
                    var opt = $.extend(true, {}, option, {
                        xAxis: {
                            data: res.data.labels
                        },
                        series: [
                            {
                                name: '直流电压1',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.DCU1
                            },
                            {
                                name: '直流电压2',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.DCU2
                            },
                            {
                                name: '直流电压3',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.DCU3
                            },
                            {
                                name: '直流电压4',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.DCU4
                            }
                        ]
                    });
                    iv_chart.setOption(opt);
                    iv_chart.hideLoading();


                }, 'json');
            }

            function create_output_i_chart() {
                var input_i = $('#J-output-i');
                var params = {};
                params.device_id = '{{$device->id}}';
                params.date = input_i.find('.J-date-picker').val();
                params.time = input_i.find('.J-time-picker').val();
                oi_chart.showLoading();
                $.get('/frontend/device/some-data', params, function (res) {
                    if (res.status == 0) {
                        alert('获取数据失败！');
                        return;
                    }
                    var opt = $.extend(true, {}, option, {
                        xAxis: {
                            data: res.data.labels
                        },
                        series: [
                            {
                                name: 'A相电流',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.ACIA
                            },
                            {
                                name: 'B相电流',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.ACIB
                            },
                            {
                                name: 'C相电流',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.ACIC
                            }
                        ]
                    });
                    oi_chart.setOption(opt);
                    oi_chart.hideLoading();

                }, 'json');
            }

            function create_output_v_chart() {
                var input_i = $('#J-output-v');
                var params = {};
                params.device_id = '{{$device->id}}';
                params.date = input_i.find('.J-date-picker').val();
                params.time = input_i.find('.J-time-picker').val();
                ov_chart.showLoading();
                $.get('/frontend/device/some-data', params, function (res) {
                    if (res.status == 0) {
                        alert('获取数据失败！');
                        return;
                    }
                    var opt = $.extend(true, {}, option, {
                        xAxis: {
                            data: res.data.labels
                        },
                        series: [
                            {
                                name: 'A相电压',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.ACUA
                            },
                            {
                                name: 'B相电压',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.ACUB
                            },
                            {
                                name: 'C相电压',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.ACUC
                            }
                        ]
                    });
                    ov_chart.setOption(opt);
                    ov_chart.hideLoading();

                }, 'json');
            }

            function create_dgc_chart() {
                var input_i = $('#J-dgc');
                var params = {};
                params.device_id = '{{$device->id}}';
                params.date = input_i.find('.J-date-picker').val();
                params.time = input_i.find('.J-time-picker').val();
                dgc_chart.showLoading();
                $.get('/frontend/device/some-data', params, function (res) {
                    if (res.status == 0) {
                        alert('获取数据失败！');
                        return;
                    }
                    var opt = $.extend(true, {}, option, {
                        xAxis: {
                            data: res.data.labels
                        },
                        series: [
                            {
                                name: '每日电量',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: res.data.DayGenCap
                            }
                        ]
                    });
                    dgc_chart.setOption(opt);
                    dgc_chart.hideLoading();

                }, 'json');
            }


            create_input_i_chart();
            create_input_v_chart();
            create_output_i_chart();
            create_output_v_chart();
            create_dgc_chart();

            $('#J-input-i .J-date-picker').datepicker().on('changeDate', function () {
                create_input_i_chart();
            });
            $('#J-input-i .J-time-picker').change(function () {
                create_input_i_chart();
            });
            $('#J-input-v .J-date-picker').datepicker().on('changeDate', function () {
                create_input_v_chart();
            });
            $('#J-input-v .J-time-picker').change(function () {
                create_input_v_chart();
            });
            $('#J-output-i .J-date-picker').datepicker().on('changeDate', function () {
                create_output_i_chart();
            });
            $('#J-output-i .J-time-picker').change(function () {
                create_output_i_chart();
            });
            $('#J-output-v .J-date-picker').datepicker().on('changeDate', function () {
                create_output_v_chart();
            });
            $('#J-output-v .J-time-picker').change(function () {
                create_output_v_chart();
            });
            $('#J-dgc .J-date-picker').datepicker().on('changeDate', function () {
                create_dgc_chart();
            });
            $('#J-dgc .J-time-picker').change(function () {
                create_dgc_chart();
            });


        });

    </script>
@stop